@charset "utf-8";


/*----------------------------头部-start---------------------*/
.header {
	width: 100%;
	min-width:1024px;
	position: fixed;
	margin: 0px;
	top: 0px;
	background: #fff;
	z-index:11;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);

	.nav{

	  color: #fff;
	  margin: 0 auto;
	  background: #fff;


	  &>ul{
	    padding:0px;
	    margin:0px;

	    li{

	     &>a{
        color: #fff;
	      text-decoration: none;

	     }
	    }
	  }

	  .top{
      width:100%;
      background-color:#fff;
      position:relative;
			height: 46px;
      display: flex;
      padding: 7px 0;
      align-items: center;

      i{
        font-size:25px;
	      color:#656262;
      }

      .top_left{
        text-align:left;
        color:#FFF;
        box-sizing: border-box;
        border-right: 1px dashed #999;
        display: flex;
        align-items: center;
        justify-content: center;

        i{
          padding-right:10px;
        }
      }

      .nav_top_left{
        height: 54px;
        width: 68px;
        text-align: center;
      }

      .nav_top_center{
        padding-left: 24px;
        display: flex;
        align-items: center;

        img{
          width: 50px;
          height: 50px;
          border-radius: 25px;
          border: 1px solid #999;
        }

        .user-info{
          font-size: 18px;
          color: #333;
          margin-left: 15px;
        }

        .date{
          margin-left: 15px;
          font-size: 14px;
          color: #999;

          i{
            font-size: 14px;
            margin-right: 5px;
            color: #999;
          }
        }
      }


      .nav_top_right{
        margin-right:20px;
				float: right;

        ul.nav_right{
					list-style: none;
			    vertical-align: middle;
			    height: 60px;
          display: flex;
          align-items: center;

	        &>li{

	          list-style: none;
						display: inline-block;
						font-size: 25px;
            width: 36px;
            height: 36px;
            line-height: 36px;
						position:relative;
            border: 1px solid #cfcfcf;
            margin-right: 10px;

						&>a{
							position: relative;
              width: 36px;
              height: 36px;
              display: flex;
              align-items: center;
              justify-content: center;

							.message_tip{
								width: 8px;
								height: 8px;
								background: red;
								position: absolute;
								top: -6px;
								right: -1px;
								border-radius: 5px;
							}
						}

						.dropdown_menu{
							margin-top: -4px;
							right: 0px;
							min-width: auto;
							border: 1px solid rgba(0, 0, 0, 0.2);
							border-radius: 6px;
							box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2);
							padding: 0;
							font-size: 13px;
							z-index: 10;
							min-width: 120px;
							background: #fff;

						  li{
								float: left;
								padding: 5px 0px;
								width: 100%;
								a{
									height: 25px;
									padding: 0px 20px;

									span{
										color: red;
									}
								}

							}

						}

						&.open{

							.dropdown_menu{
								display: block;
							}

						}

	        }
        }
      }

      .top_right{

        height:57px;
        position:absolute;
        top:0px; right:0px;
        text-align:center;
        color:#FFF;

				i{
					cursor: pointer;
				}

      }
	  }
	}
}

.dropdown_menu{

	position: absolute;
  top: 100%;
  left: auto;
  display: none;
  float: left;

	&:before{
		position: absolute;
    top: -7.5px;
    right: 16px;
    display: inline-block;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #fff;
    border-left: 8px solid transparent;
    content: '';

	}
}
